<template>
    <div class="wrap">
        <a-button type="link" @click="handCLick" v-if="!['analyPie'].includes(type)">{{ text }}</a-button>
        <a-modal title="查看记录" :visible="visible" :footer="null" @cancel="handleCancel" :width="800">
            <div class="modalWrap">
                <div class="modalWrap-table">
                    <a-table :columns="columns" :data-source="list" :loading="loading" :pagination="false"
                        :scroll="{ y: 'calc(60vh - 50px)' }">

                        <span slot="options" slot-scope="text, record">
                            <ShowModal :record="record" :id="record.id" v-if="[977].includes(Number(menuId)) || type == 'analyPie'">
                                <a-tooltip placement="top" title="详情">
                                    <a-button size="small" type="link">
                                        <ZSIcon icon="icon-xiangqing"></ZSIcon>
                                    </a-button>
                                </a-tooltip>
                            </ShowModal>
                        </span>
                    </a-table>
                </div>
                <div class="modalWrap-pagination">
                    <span>共{{ total }}条</span>
                    <a-pagination :current="page.pageNum" :pageSize="page.pageSize" size="small" :total="total"
                        show-size-changer show-quick-jumper @change="paginChange" @showSizeChange="onShowSizeChange" />
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import { columnsData } from './js/js';
import ShowModal from "@/components/ZSModal/ShowDialog.vue";
import ZSIcon from '@/components/ZSIcon/ZSIcon.vue';
export default {
    name: 'FireModalList',
    components: { ShowModal, ZSIcon },
    props: {
        text: {
            type: String,
            default: '',
        },
        record: {
            type: Object,
            default: () => { }
        },
        type: {
            type: [String, Number],
        },
        menuId: {
            type: [String, Number],
        },
        otherData: {
            type: Object,
            default: () => { }
        },
        isVisible: {
            type: Boolean,
            default: false,
        },
        onCallBack: {
            type: Function,
            default: () => { }
        },
    },
    data() {
        return {
            visible: false,
            page: {
                pageNum: 1,
                pageSize: 10,
            },
            columns: [],
            list: [],
            total: 0,
            loading: false,
        }
    },
    mounted() {
        this.columns = columnsData[this.type];
    },
    methods: {
        handCLick() {
            this.visible = true;
            this.getList();
        },
        handleCancel() {
            this.visible = false;
            this.$nextTick(() => {
                if (typeof (this.onCallBack) == 'function') {
                    this.onCallBack();
                }
                setTimeout(() => {
                    this.reset();
                }, 100);
            })
        },
        reset() {
            this.page = {
                pageNum: 1,
                pageSize: 10,
            };
            this.list = [];
            this.loading = false;
            this.total = 0;
        },
        // 分页相关
        paginChange(current, pageSize) {
            let newPaginTion = {
                ...this.page,
                pageNum: current,
                pageSize,
            };
            this.page = newPaginTion;
            this.getList(this.pagination);
        },
        onShowSizeChange(current, pageSize) {
            let newPaginTion = {
                ...this.page,
                pageNum: current,
                pageSize,
            };
            this.page = newPaginTion;
            this.getList(this.page);
        },
        getList(aParams) {
            if (this.type != 'analyPie' && (!this.otherData && !this.otherData.company)) {
                return this.$message.error("缺少参数");
            }

            let params = {
            };
            if (this.type == 'analyPie') {
                params['deptName'] = this.record.name
            } else {
                params['company'] = this.otherData.company;
                params['fireId'] = this.record.fireId;
            }
            params = {
                ...params,
                ...this.page,
                ...this.otherData,
                ...aParams,
            }

            this.loading = true;
            let url = '';
            let questType;
            if (this.type != 'analyPie') {
                url = this.$pageDetailsListMHQ;
                questType = 'getAxios'
            } else {
                url = this.$QQCTDetailsListQqctn;
                questType = 'postAxios'
            }
            this[questType](url, params)
                .then((res) => {
                    if (res.code == 200) {
                        this.total = res.data.total;
                        this.list = res.data.records;
                    }
                })
                .catch(() => { })
                .finally(() => {
                    this.loading = false;
                });
        }
    },
    watch: {
        isVisible: {
            handler(nVal, oVal) {
                if (nVal) {
                    this.handCLick();
                }
            },
            immediate: true,
        }
    }
}
</script>
<style lang="less" scoped>
::v-deep {
    .ant-modal-body {
        padding: 0px;
    }

    .ant-table-thead>tr>th {
        background-color: #f5f7fa;
        border-width: 6px;
    }
}

.modalWrap {
    &-table {
        height: 60vh;
    }

    &-pagination {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 8px 6px;
        border-top: 1px solid #cdcdcd55;
    }
}
</style>